<template>
  <div id="test_app">
      <!--echarts的容器-->
	  <div id="chartLineBox" style="width: 100%;height: 350px;"> </div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts'
export default {
	mounted(){
        this.chartLine = echarts.init(document.getElementById('chartLineBox'));
 
        // 指定图表的配置项和数据
        var option = {
            tooltip: {              //设置tip提示
                trigger: 'axis'
            },
            
            legend: {               //设置区分（哪条线属于什么）
                data:['用户统计','商品统计',"浏览统计","订单统计"]
            },
            color: ['#2984f8', '#FA6F53',"#8AE09F","#303133"],       //设置区分（每条线是什么颜色，和 legend 一一对应）
            xAxis: {                //设置x轴
                type: 'category',
                boundaryGap: false,     //坐标轴两边不留白
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日',],
                name: '',           //X轴 name
                nameTextStyle: {        //坐标轴名称的文字样式
                    color: '#999999',
                    fontSize: 16,
                    padding: [0, 0, 0, 20]
                },
                axisLine: {             //坐标轴轴线相关设置。
                    lineStyle: {
                        color: '#999999',
                    }
                }
            },
            yAxis: {
                name: '',
                nameTextStyle: {
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 10, 0]
                },
                axisLine: {
                    lineStyle: {
                        color: '#999999',
                    }
                },
                type: 'value'
            },
            series: [
              {
                name: '用户统计',
                data:  [1,3,1,],
                type: 'line',               // 类型为折线图
                lineStyle: {                // 线条样式 => 必须使用normal属性
                    normal: {
                        color: '#2984f8',
                    }
                },
              },
              {
                name: '商品统计',
                data: [30,40,20],
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#FA6F53',
                    }
                },
              },
               {
                name: '浏览统计',
                data:  [70,90,100],
                type: 'line',               // 类型为折线图
                lineStyle: {                // 线条样式 => 必须使用normal属性
                    normal: {
                        color: '#8AE09F',
                    }
                },
              },
             
              {
                name: '订单统计',
                data:  [10,30,40],
                type: 'line',               // 类型为折线图
                lineStyle: {                // 线条样式 => 必须使用normal属性
                    normal: {
                        color: '#909399',
                    }
                },
              },
          ]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        this.chartLine.setOption(option);
    },}
</script>
 
<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
</style>